/**
 * Description
 *
 * Creation Date 20/12/2017
 * @author Candy
 */
import React, { Component } from 'react'
import {
	StyleSheet,
	View,
	Image,
	TouchableOpacity
} from 'react-native';
import { screen } from '../../utils';

export default class BrandList extends Component {


	toCategory = (item) => {
		const { navigation } = this.props;
		navigation.navigate('Category', {title: item.brand_name, id: item.brand_id})
	};

	render() {
		const { brands } = this.props;

		return (
			<View style={ styles.brandWrapper }>
				{
					brands.map((item, index) => {
						if (index < 10) {
							return (
								<TouchableOpacity onPress={() => this.toCategory(item)} key={index}>
									<Image style={styles.brandImage} resizeMode='stretch'
										   source={{uri: item.brand_image + '?param=50y30'}}/>
								</TouchableOpacity>
							)
						}

					})
				}
			</View>
		)
	}
}

const styles = StyleSheet.create({
	brandImage: {
		width: screen.width/5 - 10,
		height: 50,
		backgroundColor: '#fff',
		marginLeft: 5,
		marginRight: 5,
		marginTop: 10
	},
	brandWrapper: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'center',
		flexWrap: 'wrap',
		paddingBottom: 10,
		backgroundColor: '#fff'
	}
})